<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <div class="conetnt edit_con">
          <div class="edit_content">
            <el-form size="small" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules">
              <el-form-item label="商品链接" prop="urls">
                <el-input style="width:600px;" type="textarea" :rows="6" placeholder="请输入内容" v-model="obj.urls"></el-input>
                <div style="color:#909399;font-size:12px;">
                  支持采集淘宝、天猫、1688阿里巴巴、京东、拼多多、苏宁易购商品链接，多条地址，请用换行区分，一次最多添加10条； 保存之后的数据请在
                  <router-link tag="a" target="_blank" to="/product/list/listStock" style="margin-left:10px"><el-button type="text">商品列表->仓库中</el-button></router-link>
                  中查看
                </div>
              </el-form-item>
              <el-form-item label="所属分类">
                <el-cascader v-model="classify_id" ref="cateCal" :options="cateList" :props="{multiple: true, checkStrictly: true}" clearable></el-cascader>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="setting_bootom">
        <el-button :loading="isloading" v-has size="medium" type="primary" @click="saveData">{{ text }}</el-button>
      </div>
    </div>
    <el-dialog title="" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="show" width="500px" class="dialog_box">
      <div class="u-flex u-flex-col " v-if="!all_fin">
        <img src="@/assets/images/nloading.gif" />
        <div class="status">{{ status_text[status].text }}</div>
        <div class="num">{{ index }}/{{ total_num }}</div>
      </div>
      <div class="u-flex u-flex-col" v-else>
        <i class="el-sc-mc-wcqk" style="font-size:60px"></i>
        <div class="status">获取完成</div>
        <div class="num">成功{{ success_num }}个</div>
        <el-button size="small" type="primary" @click="show = false">好的</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {getAllProCate} from '@/api/shop/product';

import {addscrapy} from '@/api/mall/scrapy';

export default {
  data() {
    return {
      status: 1,
      status_text: [
        {},
        {
          id: 1,
          text: '正在获取中'
        },
        {
          id: 2,
          text: '获取成功'
        },
        {
          id: 3,
          text: '获取失败'
        }
      ],
      show: false,
      index: 1,
      success_num: 0,
      total_num: 1,
      all_fin: false,
      obj: {
        classify_id: '',
        classify_value: '',
        urls: '',
        n_load: 1
      },
      cateList: [],
      classify_id: [],
      itemRules: {
        urls: [
          {
            required: true,
            message: '商品链接必须填写',
            trigger: 'blur'
          }
        ],
        classify_id: [
          {
            required: true,
            message: '分类不能为空'
          }
        ]
      },
      text: '立即获取',
      isloading: false
    };
  },
  mounted() {
    this.getAllProCate();
  },
  methods: {
    preText(pretext) {
      return pretext
        .replace(/\r\n/g, '<br/>')
        .replace(/\n/g, '<br/>')
        .replace(/\s/g, '<br/>');
    },
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          if (this.classify_id.length == 0) {
            this.$message.error('请选择分类');
            return false;
          }
          this.text = '获取中';
          this.isloading = true;
          //封装类别数据(id)
          let cid = '';
          this.classify_id.forEach(e => {
            cid += e.join('->') + ',';
          });
          this.obj.classify_id = cid.substring(0, cid.length - 1);
          //封装类别数据(value)
          let cval = this.$refs['cateCal'].getCheckedNodes(),
            s = '';
          cval.forEach(e => {
            s += e.label;
            s += ',';
          });
          this.obj.classify_value = s.substring(0, s.length - 1);
          let a = this.preText(this.obj.urls);
          let b = a.split('<br/>');
          this.total_num = b.length;
          this.success_num = 0;
          this.index = 1;
          this.all_urls = b;
          this.show = true;
          this.all_fin = false;
          this.addscrapy();
        }
      });
    },
    addscrapy() {
      let data = {
        classify_id: this.obj.classify_id,
        classify_value: this.obj.classify_value,
        urls: this.all_urls[this.index-1],
        n_load: 1
      };
      this.status = 1;
      addscrapy(data)
        .then(res => {
          this.success_num++;
          this.status = 2;
          this.next();

          // this.obj = {
          //   classify_id: '',
          //   classify_value: '',
          //   urls: '',
          //   n_load: 1
          // };
          // this.classify_id = [];
        })
        .catch(_ => {
          this.status = 3;
          this.next();
        });
    },
    next() {
      if (this.index < this.total_num) {
        this.index++;
        this.addscrapy();
      } else {
        this.all_fin = true;
        this.isloading=false;
        this.obj={
          classify_id: '',
          classify_value: '',
          urls: '',
        }
      }
    },
    //获取所有商品分类
    getAllProCate() {
      //this.isLoading = true;
      getAllProCate().then(res => {
        //this.isLoading = false;
        //处理分类数据
        let l = [],
          _l = res.msg.data;
        _l.forEach(e => {
          let o = {};
          (o.value = e.id), (o.label = e.name);
          o.children = [];
          //循环二级
          if (e.children && e.children.length > 0) {
            e.children.forEach(a => {
              let o1 = {};
              o1.value = a.id;
              o1.label = a.name;
              o1.children = [];
              o.children.push(o1);
              //循环三级
              if (a.children && a.children.length > 0) {
                a.children.forEach(x => {
                  o1.children.push({
                    value: x.id,
                    label: x.name
                  });
                });
              }
            });
          }
          l.push(o);
        });
        this.cateList = l;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
/* //选择图标 */
.icon_box {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }
  .noIcon {
    width: 60px;
    height: 60px;
    display: inline-block;
  }
  .iconfont {
    font-size: 30px;
  }
  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
.configuration {
  .el-input {
    width: 120px;
    margin: 0px 5px;
  }
}

.status {
  font-size: 16px;
  margin: 20px 0;
}
.num {
  font-size: 12px;
  margin-bottom: 20px;
}
</style>
